<template>
	<div id="channel_manage" class="container">
		<div class="content">
			<!-- <div class="title">{{title}}</div> -->
			<div class="panel">
				<div class="condition">
					<div class="row_one">
						<span class="condition_name">渠道类型</span>
						<el-select v-model="param.channelType"
								   clearable placeholder="请选择渠道类型" style="width: 1.8rem;" >
						    <el-option v-for="item in channelMode" :key="item.value"
						      		   :label="item.name" :value="item.value">
						    </el-option>
						</el-select>
						&nbsp;
						  
						<el-input style="width: 3.5rem;" placeholder="搜索 渠道名称" clearable
			   				 		  v-model="param.name" class="input_search" maxlength="100">
			  			</el-input>
			  			&nbsp;
			  			<div class="search_btn" @click="search()" v-if="hasApi('channelList')">搜索</div>
						
						<div class="right_btn" @click="openAdd()" v-if="hasApi('channelAdd')">新建渠道</div>
					</div>
				</div>
				
				<div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 2rem;">序号</td>
								<td style="width: 4rem;">渠道名称</td>
								<td style="width: 2rem;">类型</td>
								<td style="width: 2rem;">咨询量</td>
								<td style="width: 2rem;">成交量</td>
								<td style="width: 2rem;">成交金额</td>
								<td style="width: 2rem;">备注</td>
								<td style="width: 3rem;">创建时间</td>
								<td style="width: 2rem;">创建人</td>
								<td style="width: 2rem;">操作</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item,index in chennelList">
								<td>{{item.oderby}}</td>
								<td>{{item.name}}</td>
								<td>{{channelModeMap[item.channelType]}}</td>
								<td>{{item.consultationNum}}</td>
								<td>{{item.businessNum}}</td>
								<td>{{item.businessMoney}}</td>
								<td style="max-width: 2rem;" class="ellipsis">{{item.remark}}</td>
								<td>{{item.createTime}}</td>
								<td>{{item.createUserName}}</td>
								<td>
									<span class="operate_btn" v-if="hasApi('channelUpdate')" @click="openEdit(item)">编辑</span>
									&nbsp;
									<span class="operate_btn" v-if="hasApi('channelDelete')" @click="toDelete(item.clueChannelId)">删除</span>
								</td>
							</tr> 
						</tbody>
					</table>
				</div>
				<el-pagination
			      layout="total, sizes, prev, pager, next, jumper"
			      :current-page="param.currPage"
			      @size-change="pageSizeChange"
		      	  @current-change="pageIndexChange"
			      :total="count">
			    </el-pagination>
			</div>
		</div>
		
		<channelAdd ref="channelAdd" @callback="closeAdd"></channelAdd>
		<channelEdit ref="channelEdit" @callback="closeEdit"></channelEdit>
	</div>
</template>

<script>
	
import channelAdd from './subpage/channel_add'
import channelEdit from './subpage/channel_edit'
	
var vm,dict;
export default {
	components : {
		channelAdd,channelEdit
	},
	data : function() {
		return {
			title : this.$route.name,
			param : {
				name : "",
				channelType : "",
				campusId : this.$store.state.campusId,
				currPage : 1,
				pageSize : 10
			},
			count : null,
	        chennelList : [],
	        channelMode : null,
	        channelModeMap : null,
	        
		}
	},
	methods : {
		search : function(currPage) {
			vm.param.currPage = currPage || 1;
			
			api.channelList(vm.param).then(function(data) {
				vm.chennelList = data.list;
				vm.count = data.totalCount
			})
		},
		campusChange : function(campusId) { //校区改变
			vm.param.campusId = campusId;
			vm.search();
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
	  	toDelete : function(id) {
	  		tool.confirm("确认删除?", {
        		confirmButtonText: "确定",
        		cancelButtonText: "取消",
        		type: 'warning'
       	 	}).then(function() {
          		api.channelDelete({clueChannelIds : [id+""]}).then(function(data) {
		  			vm.search();
		  			tool.message({ showClose: true, message: "删除成功", type: 'success' });
		  		})
        	});
	  		
	  	},
		openAdd : function() {
			vm.$refs.channelAdd.init();
		},
		closeAdd : function() {
			vm.search();
		},
		openEdit : function(channel) {
			vm.$refs.channelEdit.init(channel);
		},
		closeEdit : function() {
			vm.search();
		}
	},
	mounted : function() {
		
	},
	created : function() {
		vm = this;
		//请求列表数据
		vm.search();
		
		//获取数据字典对象
		dict = tool.getItem(lsKey.dict,true);
		vm.channelMode = dict["channel_mode"];
		vm.channelModeMap = tool.parseDict(dict["channel_mode"]);
	}
}

</script>

<style lang="scss">
	#channel_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
	.right_btn {
		background-image: url(~@/assets/img/clue_manage/add_white.png);
	}
</style>